<template>
  <div id="box">
    <div class="user">
      <p>注册用户名：</p>
      <!-- @keyup监听键盘事件 -->
      <!-- @keyup.enter回车键获取值 -->
      <p>
        <input
          v-model.trim="user"
          @keyup.enter="addItem()"
          type="text"
          placeholder="用户名"
        />
      </p>
      <p>吐槽内容：</p>
      <p>
        <textarea
          v-model="comm"
          @keyup.enter="addItem()"
          placeholder="吐槽内容"
        ></textarea>
      </p>
      <p><button type="button" @click="btn">提交</button></p>
    </div>

    <div class="speak">
      <span>回复：</span>
      <ul v-for="item in list" :key="item.name">
        <li>
          {{ item.name }}说：{{ item.txt
          }}<a href="#" @click="delItem(item)">删除</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  // 插值表达式使用的变量放在data函数的返回对象里
  data() {
    return {
      // 评论用户以及内容的数据
      // name评论的用户名字 txt评论的内容
      list: [{ name: "white", txt: "想吃烤面筋" },
      { name: "钾威祥聊", txt: "传奇怀旧服，私" }],
      user: "", //输入的名字存入
      comm: "", //评论存入
    };
  },
  methods: {
    btn() {
      if (!this.user) {
        alert("输入的用户名不能为空！");
        return;
      } else if (!this.comm) {
        alert("输入的评论不能为空！");
        return;
      } else {
        const usercom = {
          name: this.user,
          txt: this.comm,
        };
        this.list.unshift(usercom);
        this.user = "";
        this.comm = "";
      }
    },
    // 用户名方法事件
    addItem() {
      // 创建用户名
      const item = {
        // 用户名字
        name: this.user,
        // 用户评论
        txt: this.comm,
      };

      // 在list前面添加 item    unshift在前面添加
      this.list.unshift(item);

      // 清空user
      this.user = "";
      // 清空评论
      this.comm = "";
    },
    //删除点击事件  获取元素
    delItem(item) {
      // 查找元素item在list里的下标
      const ind = this.list.findIndex((value) => value.name == item.name);
      //删除
      // splice 功能（从第几个元素，删除几个 添加内容）
      this.list.splice(ind, 1);
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.user {
  margin-left: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  margin: auto;
  display: flex;
  justify-content: center;
}
p {
  margin-top: 10px;
}
a {
  text-decoration: none;
  float: right;
}
ul {
  margin-left: 30px;
}
li {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  line-height: 50px;
  border: 1px solid #cccccc;
  padding: 0 20px;
  list-style: none;
}
.speak {
  margin-left: 30px;
}
</style>
